<!--折线图-->
<template>
</template>

<script>
export default {
  name: "my-polyline",
  mounted() {
    //要数据
    this.$http.post("http://localhost:9000/money/selectAmountOfId", {
      userId: sessionStorage.getItem("token")
    }).then((res) => {
      console.log(res);
      this.drawLine(res.data[0], res.data[1]);
    }).catch(() => {
      console.log("查询失败")
    })
  },
  methods: {
    drawLine(date, date1) {
      // 基于准备好的dom，初始化echarts实例
      let myChart;
      myChart = this.$echarts.getInstanceByDom(document.getElementById('myChart'))
      //防止重复创建
      if (myChart == null) {
        myChart = this.$echarts.init(document.getElementById('myChart'))
      }
      //清空再画，不然会重叠
      myChart.clear();

      // 绘制图表
      myChart.setOption({
        title: {
          text: '最近七天内的消费收入情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['收入', '支出'],
          top: "6%"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: "20%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '收入',
            type: 'line',
            data: date
          },
          {
            name: '支出',
            type: 'line',
            data: date1
          }
        ]
      });
    }
  }
}
</script>

<style scoped>

</style>
